import { defineComponent, PropType, nextTick, Ref, ref, watch, onMounted, computed } from 'vue';
import { Overview } from '@/domain/common/types/common';
import '@/project/dataBoard/assets/css/tablePage/total.less';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  name: 'total',
  props: {
    overview: {
      default: () => [],
      type: Array as PropType<Overview>
    }
  },
  setup(props) {
    let tabShow: Ref<Boolean> = ref(true);
    let tabVisible: Ref<Boolean> = ref(false);
    // 监听列表变化
    watch(
      () => props.overview,
      (newVal) => {
        if (newVal && newVal.length > 0) {
          nextTick(() => {
            const wrapperHeight: number = document.getElementById('wrapper')?.clientHeight || 0;
            const innerHeight: number = document.getElementById('inner')?.clientHeight || 0;
            if (wrapperHeight < innerHeight) {
              tabVisible.value = true;
            }
          });
        }
      }
    );
    return () => (
      <>
        <div class={'title-h mt-8 justify-between'}>
          整体概览
          {tabVisible.value && (
            <div
              class="flex items-center list-wrapper-show text-xs"
              onClick={() => {
                tabShow.value = !tabShow.value;
              }}
            >
              {tabShow.value ? (
                <>
                  展示
                  <DownOutlined class={'ml-1'} />
                </>
              ) : (
                <>
                  收起
                  <UpOutlined class={'ml-1'} />
                </>
              )}
            </div>
          )}
        </div>
        <div id="wrapper" class={['block-wrap-outer', 'list-wrapper list-wrapper-out', tabShow.value ? ' ' : 'list-wrapper-auto']}>
          <div id="inner" class="list-inner">
            {props.overview.map((node) => (
              <div class={'list-inner-detail'}>
                <span class={'list-inner-detail-title'}>{node.title}</span>
                <span class={'list-inner-detail-data'}>
                  {node.data}
                  {node.rote && '%'}
                </span>
              </div>
            ))}
          </div>
        </div>
      </>
    );
  }
});
